<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>物资归还</title>
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="../../../../plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css">
    <link rel="stylesheet" href="../../../../plugins/fontawesome-free/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../../../../dist/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link href="../../../../dist/css/fonts.css" rel="stylesheet">
</head>

<body class="hold-transition sidebar-mini">
    <div class="wrapper">
        <!-- Navbar -->
        <nav class="main-header navbar navbar-expand navbar-white navbar-light" id="navbar_menu">
            <!-- Left navbar links -->
        </nav>
        <!-- /.navbar -->
        <!-- Main Sidebar Container -->
        <aside class="main-sidebar sidebar-dark-primary elevation-4" id="sidebar_menu">
        </aside>
        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <section class="content-header">
                <div class="container-fluid">
                    <div class="row mb-2">
                        <div class="col-sm-6">
                            <h1>物资归还</h1>
                        </div>
                        <div class="col-sm-6">
                            <ol class="breadcrumb float-sm-right">
                                <li class="breadcrumb-item"><a href="#">Home</a></li>
                                <li class="breadcrumb-item active">物资归还</li>
                            </ol>
                        </div>
                    </div>
                </div><!-- /.container-fluid -->
            </section>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">物资列表</h3>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">
                                <table class="table table-bordered" id="tableData">
                                    <thead>
                                        <tr>
                                            <th style="text-align: center;">物品编号</th>
                                            <th style="text-align: center;">物品名称</th>
                                            <th style="text-align: center;">借用数量</th>
                                            <th style="text-align: center;">借用日期</th>
                                            <th style="text-align: center;">归还日期</th>
                                            <th style="text-align: center;">借用状态</th>
                                            <th style="text-align: center;">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="pageBody">
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th style="text-align: center;">物品编号</th>
                                            <th style="text-align: center;">物品名称</th>
                                            <th style="text-align: center;">借用数量</th>
                                            <th style="text-align: center;">借用日期</th>
                                            <th style="text-align: center;">归还日期</th>
                                            <th style="text-align: center;">借用状态</th>
                                            <th style="text-align: center;">操作</th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>

                    </div>

                </div>
                <!-- /.row -->
            </div>
            <!-- /.content -->
        </div>

        <!-- /.container-fluid -->
        <!-- <div class="content-wrapper">
            <section class="content-header">
                <div class="container-fluid">
                  <div class="row mb-2">
                    <div class="col-sm-6">
                      <h1>未归还物资</h1>
                    </div>
                    <div class="col-sm-6">
                      <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">主页</a></li>
                        <li class="breadcrumb-item active">未归还物资</li>
                      </ol>
                    </div>
                  </div>
                </div>
              </section>
            <div class="content">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">未归还物资列表</h3>
                            </div>
                            <div class="card-body table-responsive p-0">
                                <table class="table table-hover text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>物品名称</th>
                                            <th>数量</th>
                                            <th>借用时间</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="pageBody">
                                    </tbody>
                                </table>
                            </div>
                            <div class="card-footer clearfix">
                                <ul class="pagination pagination-sm m-0 float-right" id="turnPages">
                                    <li class="page-item" data-page="0">
                                        <a class="page-link" href="javascript:void(0);">&laquo;</a>
                                    </li>
                                    <li class="page-item" data-page="-1">
                                        <a class="page-link" href="javascript:void(0);">&raquo;</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> -->
    </div>
    <!-- /.content-wrapper -->
    </div>
    <div class="modal fade" id="modal_return">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header" style="text-align: center;border:none;display:block">
                    <h4 class="modal-title" >确认归还</h4>
                    <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button> -->
                </div>
                <div class="modal-footer justify-content-between" style="border:none">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="return_btn">提交</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- ./wrapper -->
    <!-- REQUIRED SCRIPTS -->
    <!-- jQuery -->
    <script src="../../../../plugins/jquery/jquery.min.js"></script>
    <script>
        // 引入左边导航栏
        $.get("../../../../bars/Operator/operator_sidebar.html", function (data) {
            // console.log(data)
            $("#sidebar_menu").html(data);
        })
        //引入上边导航栏 
        $.get("../../../../bars/Operator/operator_navbar.html", function (data) {
            $("#navbar_menu").html(data);
        })
    </script>

    <!-- Bootstrap 4 -->
    <script src="../../../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- AdminLTE App -->
    <script src="../../../../plugins/sweetalert2/sweetalert2.min.js"></script>
    <script src="../../../../dist/js/adminlte.min.js"></script>
    <script>
        let things_list = []
        let thing_id = ""
        let thing_detail =""
        const Toast = Swal.mixin({
            toast: true,
            showConfirmButton: false,
            timer: 1500
        });
        $(function () {
            // 翻页按钮委托注册事件

            $.ajax({
                type: 'POST',
                url: '/operator/getWaitingReturnList',
                async: true,
                dataType: 'json',
                success: function (res) {
                    console.log(res.data)
                    things_list = res.data
                    buildTableBody(res.data)
                },
                error: function (err) {
                    Toast.fire({
                        icon: 'error',
                        title: ' 请重试'
                    })
                    return false
                }
            });

            // $("#turnPages").on("click", "li", function (data) {
            //     let activePage = $(this).data("page")
            //     if (activePage === 0) {
            //         $(this).siblings(".active").prev().addClass("active").siblings().removeClass("active")
            //         if ($(this).hasClass("active")) {
            //             $(this).removeClass("active").next().addClass("active")
            //         }
            //         activePage = $(this).siblings(".active").data("page")
            //     } else if (activePage === -1) {
            //         $(this).siblings(".active").next().addClass("active").siblings().removeClass("active")
            //         if ($(this).hasClass("active")) {
            //             $(this).removeClass("active").prev().addClass("active")
            //         }

            //         activePage = $(this).siblings(".active").data("page")
            //     } else {
            //         $(this).addClass("active").siblings().removeClass("active")
            //     }
            //     console.log(activePage)
            //     $.ajax(
            //         {
            //             url: "test" + activePage + ".json",
            //             success: function (res) {
            //                 buildTableBody(res.info.data)


            //             },
            //             error: function (err) {
            //                 console.log(err)
            //             }
            //         })
            // })
        });
        // function buildTableFooter(data) {
        //     let pageNum = data
        //     let $a
        //     for (let i = data; i > 0; i--) {
        //         $a = "<li class=\"page-item\" data-page=\"" + i + "\"><a class=\"page-link\" href=\"javascript:void(0);\" >" + i + "</a></li>"
        //         $("#turnPages").children("li:first").after($a)

        //     }
        //     $("#turnPages").children("li:first").next().addClass("active")
        // };

        function buildTableBody(data) {
            let pageData = data
            $("#pageBody").empty()
            let $tr = new Array()
            console.log(pageData.length)
            for (let i = 0; i < pageData.length; i++) {
                $tr = []
                $tr.push("<tr id=\"" + pageData[i].id + "\">")
                if( pageData[i].tid === ""){
                    $tr.push("<td style=\"text-align: center;\">" + "b"+pageData[i].bid + "</td >")
                }else{
                    $tr.push("<td style=\"text-align: center;\">" + "t"+pageData[i].tid + "</td >")
                }
                $tr.push("<td style=\"text-align: center;\">" + pageData[i].itemName + "</td >")
                $tr.push("<td style=\"text-align: center;\">" + pageData[i].amount + "</td>")
                $tr.push("<td style=\"text-align: center;\">" + pageData[i].startDate + "</td>")
                if(pageData[i].endDate==="" ||pageData[i].endDate===null ){
                    $tr.push("<td style=\"text-align: center;\"></td>")
                }else{
                    $tr.push("<td style=\"text-align: center;\">" + pageData[i].endDate + "</td>")
                }
                if (pageData[i].status === "未归还") {
                    $tr.push("<td style=\"text-align: center;\"><span class=\"badge bg-danger\" >未归还</span></td>")
                    $tr.push("<td style=\"text-align: center;\"><button type=\"button\" class=\"btn  btn-info btn-xs \"  style=\"width:80px;\"id=\"show_modal\" data-toggle=\"modal\" data-target=\"#modal_return\">归还</button></td>")
                } else {
                    $tr.push("<td style=\"text-align: center;\"><span class=\"badge bg-success\" >已归还</span></td>")
                    $tr.push("<td style=\"text-align: center;\"><button type=\"button\" class=\"btn  btn-info btn-xs \"  style=\"width:80px;\" disabled >归还</button></td>s")
                }
                $tr.push("</tr>")
                $tr = $tr.join("")
                console.log(typeof ($tr))
                $("#pageBody").append($tr)
            }

            $("#pageBody").on("click", "#show_modal", function (data) {
                thing_id = $(this).parent().parent().attr("id")
                console.log(thing_id)

            })
            $("#return_btn").on("click", function () {
                for (let i = 0; i < things_list.length; i++) {
                    if (things_list[i].id === thing_id) {
                        console.log(things_list[i])
                        thing_detail = things_list[i]
                        break
                    }
                }
                let url 
                if(thing_detail.tid === ""){
                    url = "/operator/returnBook"
                }else{
                    url = "/operator/returnThing"
                }
                $.ajax({
                    type: 'POST',
                    url: url,
                    async: true,
                    dataType: "Text",
                    data:
                        JSON.stringify(thing_detail),
                    crossDomain: true,
                    xhrFields: {
                        withCredentials: true
                    },
                    contentType: "application/json;charset=UTF-8",
                    success: function (res) {
                        console.log(res)
                        // console.log(res.statusCode);

                        if (JSON.parse(res).statusCode === "200") {
                            Toast.fire({
                                        icon: 'success',
                                        title: ' 归还成功'
                                    })
                                    setTimeout(function () { window.location.href = "./getWaitingReturnList" }, 1000);

                            return false
                        } else {
                            Toast.fire({
                                icon: 'error',
                                title: ' 请重试'
                            })
                            return false
                        }
                    },
                    error: function (err) {
                        console.log(JSON.stringify(err));
                        Toast.fire({
                            icon: 'error',
                            title: ' 请重试'
                        })
                        return false
                    }
                });
            })
        }

    </script>
</body>

</html>